<template>
  <div class="password-container">
    <div class="page-header">
      <h2>修改密码</h2>
      <p>安全地修改您的账户登录密码</p>
    </div>

    <div class="password-layout">
      <!-- Form Column -->
      <div class="form-column">
        <div class="password-card">
          <h3 class="card-title">密码修改</h3>
          
          <div class="form-group">
            <label for="cardSelect">选择银行卡</label>
            <select id="cardSelect" v-model="this.formData.cardID" required>
              <option disabled value="">请选择要修改密码的银行卡</option>
              <option v-for="card in userCards" :key="card.cardID" :value="card.cardID">
                {{card.cardID}}
              </option>
            </select>
          </div>
          
          <div class="form-group">
            <label for="currentPassword">当前密码</label>
            <div class="password-input">
              <input
                id="currentPassword"
                v-model="this.formData.lastPass"
                :type="showCurrentPassword ? 'text' : 'password'"
                required
                maxlength="6"
                placeholder="请输入6位数字密码"
                @input="validateCurrentPassword"
              />
              <button type="button" @click="showCurrentPassword = !showCurrentPassword" class="toggle-password">
                <span v-if="showCurrentPassword">🙈</span>
                <span v-else>👁️</span>
              </button>
            </div>
            <div class="error-message" v-if="currentPasswordError">{{ currentPasswordError }}</div>
          </div>
          
          <div class="form-group">
            <label for="newPassword">新密码</label>
            <div class="password-input">
              <input
                id="newPassword"
                v-model="this.formData.newPass"
                :type="showNewPassword ? 'text' : 'password'"
                required
                maxlength="6"
                placeholder="请输入6位数字新密码"
              />
              <button type="button" @click="showNewPassword = !showNewPassword" class="toggle-password">
                <span v-if="showNewPassword">🙈</span>
                <span v-else>👁️</span>
              </button>
            </div>
            <div class="error-message" v-if="newPasswordError">{{ newPasswordError }}</div>
          </div>
          
          <div class="form-group">
            <label for="confirmPassword">确认新密码</label>
            <div class="password-input">
              <input
                id="confirmPassword"
                v-model="this.formData.aNewPass"
                :type="showConfirmPassword ? 'text' : 'password'"
                required
                maxlength="6"
                placeholder="请再次输入6位数字新密码"
                @input="validateConfirmPassword"
              />
              <button type="button" @click="showConfirmPassword = !showConfirmPassword" class="toggle-password">
                <span v-if="showConfirmPassword">🙈</span>
                <span v-else>👁️</span>
              </button>
            </div>
            <div class="error-message" v-if="confirmPasswordError">{{ confirmPasswordError }}</div>
          </div>
          
          <button @click="changePassword" class="confirm-btn" :disabled="!changePassIsOK">
            确认修改
          </button>
        </div>
      </div>
      
      <!-- Info Column -->
      <div class="info-column">
        <div class="info-card">
          <h4 class="card-title"><span class="icon">💡</span> 温馨提示</h4>
          <ul>
            <li>密码必须为6位数字，请妥善保管。</li>
            <li>建议定期更换密码，提高账户安全性。</li>
            <li>不要使用生日、手机号等容易被猜到的密码。</li>
            <li>修改密码后，请使用新密码重新登录。</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- Confirm Modal -->
    <div v-if="showConfirmModal" class="confirm-modal">
      <div class="confirm-content">
        <div class="confirm-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect><circle cx="12" cy="16" r="1"></circle><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
        </div>
        <h3>确认修改密码</h3>
        <p>您确定要修改登录密码吗？</p>
        <div class="confirm-details">
          <div class="detail-item">
            <span class="label">修改时间</span>
            <span class="value">{{ confirmTime }}</span>
          </div>
          <div class="detail-item">
            <span class="label">IP地址</span>
            <span class="value">{{ userIP }}</span>
          </div>
        </div>
        <div class="confirm-actions">
          <button @click="confirmChange" class="confirm-btn">确认修改</button>
          <button @click="cancelChange" class="cancel-btn">取消</button>
        </div>
      </div>
    </div>

    <!-- Success Modal -->
    <div v-if="showSuccessModal" class="success-modal">
      <div class="success-content">
        <div class="success-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="m16 10-4 4-4-4"/><path d="m12 14 V 4"/></svg>
        </div>
        <h3>密码修改成功</h3>
        <p>您的银行卡密码已成功修改</p>
        <div class="success-details">
          <div class="detail-item">
            <span class="label">修改时间</span>
            <span class="value">{{ successTime }}</span>
          </div>
        </div>
        <button @click="closeSuccess" class="close-btn">完成</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'ChangePassword',
  props: {
    userInfo: {
      type: Object,
      required: true
    },
    userCards: {
      type: Object,
      return: true
    }
  },
  data() {
    return {
      formData: {
        cardID: "",
        lastPass: "",
        newPass: "",
        aNewPass: ""
      },
      selectedCard: '',
      currentPassword: '',
      newPassword: '',
      confirmPassword: '',
      showCurrentPassword: false,
      showNewPassword: false,
      showConfirmPassword: false,
      currentPasswordError: '',
      newPasswordError: '',
      confirmPasswordError: '',
      showConfirmModal: false,
      showSuccessModal: false,
      confirmTime: '',
      successTime: '',
      successId: '',
      changePassIsOK: false,
      userIP: '192.168.1.100' // 模拟IP地址
    }
  },
  computed: {
    isValid() {
      return this.selectedCard && this.currentPassword && !this.currentPasswordError &&
             this.newPassword && !this.newPasswordError &&
             this.confirmPassword && !this.confirmPasswordError;
    },
    isPasswordStrong() {
      return /^\d{6}$/.test(this.newPassword);
    },
    strengthClass() {
      if (!this.newPassword) return '';
      if (this.isPasswordStrong) return 'strong';
      if (this.newPassword.length >= 4) return 'medium';
      return 'weak';
    },
    strengthWidth() {
      if (!this.newPassword) return '0%';
      if (this.isPasswordStrong) return '100%';
      if (this.newPassword.length >= 4) return '60%';
      return '30%';
    },
    strengthText() {
      if (!this.newPassword) return '';
      if (this.isPasswordStrong) return '密码强度：强';
      if (this.newPassword.length >= 4) return '密码强度：中';
      return '密码强度：弱';
    }
  },
  mounted() {

    setInterval(this.changePasswordIsOK, 1000)

  },
  methods: {
    validateCurrentPassword() {
      if (!this.currentPassword) {
        this.currentPasswordError = '';
        return;
      }
      if (!/^\d{6}$/.test(this.currentPassword)) {
        this.currentPasswordError = '请输入6位数字密码';
      } else {
        this.currentPasswordError = '';
      }
    },
    validateNewPassword() {
      if (!this.newPassword) {
        this.newPasswordError = '';
        return;
      }
      if (!/^\d{6}$/.test(this.newPassword)) {
        this.newPasswordError = '新密码必须为6位数字';
      } else if (this.newPassword === this.currentPassword) {
        this.newPasswordError = '新密码不能与当前密码相同';
      } else {
        this.newPasswordError = '';
      }
      this.validateConfirmPassword();
    },
    validateConfirmPassword() {
      if (!this.formData.newPass) {
        this.confirmPasswordError = '';
        return;
      }
      if (this.formData.newPass !== this.formData.aNewPass) {
        this.confirmPasswordError = '两次输入的密码不一致';
      } else {
        this.confirmPasswordError = '';
      }
    },
    changePassword() {
      this.confirmTime = new Date().toLocaleString('zh-CN');
      this.showConfirmModal = true;
    },
    confirmChange() {
      this.showConfirmModal = false;
      
      axios.post(
          'http://localhost:8057/card/updatePass', this.formData
      ).then(res => {
        if (res.data.code === 200) {
          console.log(res.data.msg)
          this.transactionTime = new Date().toLocaleString('zh-CN');
          this.lastDepositedAmount = parseFloat(this.depositAmount);

          this.$emit('update-balance', parseFloat(this.depositAmount));
          this.showSuccessModal = true;

        }else {
          console.log(res.data.msg)
          alert(res.data.msg)
        }
      })
      

    },
    cancelChange() {
      this.showConfirmModal = false;
    },
    resetForm() {
      this.selectedCard = '';
      this.currentPassword = '';
      this.newPassword = '';
      this.confirmPassword = '';
      this.showCurrentPassword = false;
      this.showNewPassword = false;
      this.showConfirmPassword = false;
      this.currentPasswordError = '';
      this.newPasswordError = '';
      this.confirmPasswordError = '';
    },
    closeSuccess() {
      this.showSuccessModal = false;
      this.resetForm();
    },
    changePasswordIsOK() {
      if (this.formData.aNewPass && this.formData.newPass === this.formData.aNewPass)
        this.changePassIsOK = true
      else
        this.changePassIsOK = false
    }
  }
}
</script>

<style scoped>
.password-container {
  max-width: 960px;
  margin: 24px auto;
  padding: 0 16px;
  animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.page-header {
  text-align: left;
  margin-bottom: 24px;
}
.page-header h2 {
  font-size: 24px;
  font-weight: 600;
  color: #0d6efd;
}
.page-header p {
  font-size: 14px;
  color: #5a6e78;
}

.password-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: flex-start;
}

.password-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 24px;
  border: 1px solid #e9ecef;
  border-top: 4px solid #0d6efd;
}

.password-card .card-title {
  color: #0d6efd;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 24px;
}

.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #343a40;
}

input, select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ced4da;
  border-radius: 6px;
  font-size: 14px;
  background-color: #fff;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  box-sizing: border-box;
}
input:focus, select:focus {
  outline: none;
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

.password-input {
  position: relative;
}
.password-input input {
  padding-right: 40px;
}
.toggle-password {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-message {
  color: #dc3545;
  font-size: 12px;
  margin-top: 4px;
}

.password-strength {
  margin: 20px 0;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}
.password-strength h4 {
  font-size: 14px;
  font-weight: 500;
  color: #343a40;
  margin: 0 0 12px 0;
}
.strength-bar {
  height: 6px;
  background: #e9ecef;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.strength-fill {
  height: 100%;
  transition: width 0.3s ease;
}
.strength-fill.weak { background: #dc3545; }
.strength-fill.medium { background: #ffc107; }
.strength-fill.strong { background: #198754; }
.strength-text {
  font-size: 12px;
  margin: 0;
}
.strength-text.weak { color: #dc3545; }
.strength-text.medium { color: #856404; }
.strength-text.strong { color: #155724; }

.confirm-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  background-color: #0d6efd;
  color: white;
  transition: background-color 0.2s;
}
.confirm-btn:hover:not(:disabled) {
  background-color: #0b5ed7;
}
.confirm-btn:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
  opacity: 0.65;
}

.info-column .info-card {
  background: #f0f7ff;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #cce3ff;
}
.info-card h4.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #0d6efd;
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
}
.info-card .icon {
  margin-right: 8px;
}
.info-card ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: #5a6e78;
}
.info-card li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 12px;
}
.info-card li:last-child {
  margin-bottom: 0;
}
.info-card li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #0d6efd;
  font-weight: bold;
}

/* Confirm Modal */
.confirm-modal {
  position: fixed;
  inset: 0;
  background-color: rgba(17, 24, 39, 0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s;
}
.confirm-content {
  background-color: white;
  border-radius: 8px;
  padding: 32px;
  width: 90%;
  max-width: 420px;
  text-align: center;
  animation: modal-pop 0.3s ease-out forwards;
}
@keyframes modal-pop {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

.confirm-icon {
  color: #0d6efd;
  margin-bottom: 16px;
}
.confirm-content h3 {
  font-size: 20px;
  font-weight: 500;
  color: #343a40;
  margin: 0 0 8px 0;
}
.confirm-content p {
  font-size: 14px;
  color: #6c757d;
  margin: 0 0 20px 0;
}
.confirm-details {
  border-top: 1px solid #e9ecef;
  margin: 20px 0;
  padding-top: 20px;
}
.detail-item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 8px;
}
.detail-item .label { color: #6c757d; }
.detail-item .value { color: #343a40; font-weight: 500; }

.confirm-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.confirm-actions .confirm-btn {
  flex: 1;
  padding: 10px;
  border: 1px solid #0d6efd;
  border-radius: 6px;
  background-color: #0d6efd;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.confirm-actions .confirm-btn:hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
}
.confirm-actions .cancel-btn {
  flex: 1;
  padding: 10px;
  border: 1px solid #6c757d;
  border-radius: 6px;
  background-color: #6c757d;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.confirm-actions .cancel-btn:hover {
  background-color: #5a6268;
  border-color: #545b62;
}

/* Success Modal */
.success-modal {
  position: fixed;
  inset: 0;
  background-color: rgba(17, 24, 39, 0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s;
}
.success-content {
  background-color: white;
  border-radius: 8px;
  padding: 32px;
  width: 90%;
  max-width: 420px;
  text-align: center;
  animation: modal-pop 0.3s ease-out forwards;
}

.success-icon {
  color: #198754;
  margin-bottom: 16px;
}
.success-content h3 {
  font-size: 20px;
  font-weight: 500;
  color: #343a40;
  margin: 0 0 8px 0;
}
.success-content p {
  font-size: 14px;
  color: #6c757d;
  margin: 0 0 20px 0;
}
.success-details {
  border-top: 1px solid #e9ecef;
  margin: 20px 0;
  padding-top: 20px;
}
.success-note {
  font-size: 13px;
  color: #dc3545;
  font-weight: 500;
  margin: 16px 0 24px 0;
}

.close-btn {
  width: 100%;
  padding: 10px;
  border: 1px solid #0d6efd;
  border-radius: 6px;
  background-color: #0d6efd;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.close-btn:hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
}

@media (max-width: 768px) {
  .password-layout {
    grid-template-columns: 1fr;
  }
  .info-column {
    order: -1; /* Move info column to top on mobile */
  }
  .confirm-actions {
    flex-direction: column;
  }
}
</style> 